// import { useNavigate } from 'react-router-dom'
import { Button, theme, Modal, Row, Col, Form, Cascader, Input, Checkbox } from 'antd'
import { logout, goto, apiRequest } from '@/api'
// import Header from '@/components/header'
import './home.scss'
import { useState } from 'react'
const { useToken } = theme


function Home() {
    // 创建路由钩子
    // const navigate = useNavigate()

    // 获取Design Token
    const { token } = useToken()
    const [modal, contextHolder] = Modal.useModal()
    // const [company, setCompany] = useState('')
    // const [username, setUsername] = useState('')
    // const [telephone, setTelephone] = useState('')
    const options = [
        {
            value: '北京市石景山区项目',
            label: '北京市石景山区项目',
            children: [
                {
                    value: '北京市石景山区项目',
                    label: '石景山',
                },
                {
                    value: '石景山标准站',
                    label: '石景山标准站',
                },
            ],
        },
        {
            value: '北京市丰台区项目',
            label: '北京市丰台区项目',
            children: [
                {
                    value: '大气',
                    label: '大气',
                    children: [
                        {
                            value: '丰台区内部',
                            label: '丰台区内部'
                        }
                    ],
                },
                {
                    value: '水',
                    label: '水',
                    children: [
                        {
                            value: '丰台区水',
                            label: '丰台区水'
                        }
                    ],

                }
            ],
        },
        {
            value: '北京市朝阳区项目(大气)',
            label: '北京市朝阳区项目(大气)',
            children: [
                {
                    value: '朝阳区ysrd',
                    label: '朝阳区ysrd'
                },
                {
                    value: '朝阳区',
                    label: '朝阳区'
                },
            ],
        },
        {
            value: '北京市西城区项目',
            label: '北京市西城区项目',
            children: [
                {
                    value: '西城区',
                    label: '西城区'
                },
                {
                    value: '西城区浓度报警',
                    label: '西城区浓度报警'
                },
            ],
        },
        {
            value: '天津市蓟州区项目',
            label: '天津市蓟州区项目',
            children: [
                {
                    value: '蓟州区',
                    label: '蓟州区'
                },
            ],
        },
        {
            value: '北京市怀柔区项目',
            label: '北京市怀柔区项目',
            children: [
                {
                    value: '怀柔内部使用',
                    label: '怀柔内部使用'
                },
            ],
        },
        {
            value: '北京市房山区项目',
            label: '北京市房山区项目',
            children: [
                {
                    value: '房山区高值报警',
                    label: '房山区高值报警'
                },
            ],
        },
        {
            value: '海淀区项目',
            label: '海淀区项目',
            children: [
                {
                    value: '街镇',
                    label: '街镇',
                    children: [
                        {
                            value: '八里庄街道',
                            label: '八里庄街道'
                        },
                        {
                            value: '海淀街道',
                            label: '海淀街道'
                        },
                        {
                            value: '北太平庄街道',
                            label: '北太平庄街道'
                        },
                        {
                            value: '北下关街道',
                            label: '北下关街道'
                        },
                        {
                            value: '东升镇',
                            label: '东升镇'
                        },
                        {
                            value: '甘家口街道',
                            label: '甘家口街道'
                        },
                        {
                            value: '海淀镇',
                            label: '海淀镇'
                        },
                        {
                            value: '花园路街道',
                            label: '花园路街道'
                        },
                        {
                            value: '马连洼街道',
                            label: '马连洼街道'
                        },
                        {
                            value: '青龙桥街道',
                            label: '青龙桥街道'
                        },
                        {
                            value: '清河街道',
                            label: '清河街道'
                        },
                        {
                            value: '清华园街道',
                            label: '清华园街道'
                        },
                        {
                            value: '上地街道',
                            label: '上地街道'
                        },
                        {
                            value: '上庄镇',
                            label: '上庄镇'
                        },
                        {
                            value: '曙光街道',
                            label: '曙光街道'
                        },
                        {
                            value: '四季青镇',
                            label: '四季青镇'
                        },
                        {
                            value: '苏家坨镇',
                            label: '苏家坨镇'
                        },
                        {
                            value: '田村路街道',
                            label: '田村路街道'
                        },
                        {
                            value: '万寿路街道',
                            label: '万寿路街道'
                        },
                        {
                            value: '温泉镇',
                            label: '温泉镇'
                        },
                        {
                            value: '西北旺镇',
                            label: '西北旺镇'
                        },
                        {
                            value: '西三旗街道',
                            label: '西三旗街道'
                        },
                        {
                            value: '香山街道',
                            label: '香山街道'
                        },
                        {
                            value: '学院路街道',
                            label: '学院路街道'
                        },
                        {
                            value: '燕园街道',
                            label: '燕园街道'
                        },
                        {
                            value: '羊坊店街道',
                            label: '羊坊店街道'
                        },
                        {
                            value: '永定路街道',
                            label: '永定路街道'
                        },
                        {
                            value: '中关村街道',
                            label: '中关村街道'
                        },
                        {
                            value: '紫竹院街道',
                            label: '紫竹院街道'
                        },
                    ]
                },
                {
                    value: '执法队',
                    label: '执法队',
                    children: [
                        {
                            value: '海淀区环保局',
                            label: '海淀区环保局'
                        },
                        {
                            value: '区生态环境局',
                            label: '区生态环境局'
                        },
                        {
                            value: '海淀推送人员',
                            label: '海淀推送人员'
                        },
                        {
                            value: '北太平庄北下关',
                            label: '北太平庄北下关'
                        },
                        {
                            value: '田村永定紫竹院',
                            label: '田村永定紫竹院'
                        },
                        {
                            value: '海淀中关村清华园',
                            label: '海淀中关村清华园'
                        },
                        {
                            value: '海淀清河西三旗东升',
                            label: '海淀清河西三旗东升'
                        },
                        {
                            value: '马连洼青龙桥温泉上庄',
                            label: '马连洼青龙桥温泉上庄'
                        },
                        {
                            value: '上地苏家坨西北旺',
                            label: '上地苏家坨西北旺'
                        },

                    ]
                }
            ]
        },
        {
            value: '北京市丰台区项目(大气)',
            label: '北京市丰台区项目(大气)',
            children: [
                {
                    value: '丰台区内部',
                    label: '丰台区内部'
                },
            ],
        },
        {
            value: '北京市开发区项目',
            label: '北京市开发区项目',
            children: [
                {
                    value: '北京开发区',
                    label: '北京开发区'
                },
            ],
        },
        {
            value: '永川区生态环境智慧综合监管平台',
            label: '永川区生态环境智慧综合监管平台',
            children: [
                {
                    value: '永川区报警(分管领导)',
                    label: '永川区报警(分管领导)'
                },
            ],
        },
        {
            value: '北京市科委水项目',
            label: '北京市科委水项目',
            children: [
                {
                    value: '科委水项目',
                    label: '科委水项目'
                },
            ],
        },
        {
            value: '江西省宜春市铜鼓县水项目',
            label: '江西省宜春市铜鼓县水项目',
            children: [
                {
                    value: '铜鼓报警环保局',
                    label: '铜鼓报警环保局'
                },
                {
                    value: '江西康隆莱健生物科技有限公司',
                    label: '江西康隆莱健生物科技有限公司'
                },
                {
                    value: '江西晶隆炭业有限公司',
                    label: '江西晶隆炭业有限公司'
                },
                {
                    value: '铜鼓县经济新区污水处理有限公司',
                    label: '铜鼓县经济新区污水处理有限公司'
                },
                {
                    value: '江西洪城水业环保有限公司铜鼓县分公司',
                    label: '江西洪城水业环保有限公司铜鼓县分公司'
                },
                {
                    value: '江西国盛竹业有限公司',
                    label: '江西国盛竹业有限公司'
                },
                {
                    value: '江西永宁科技有限责任公司',
                    label: '江西永宁科技有限责任公司'
                },
                {
                    value: '铜鼓县湘鸿化工有限公司',
                    label: '铜鼓县湘鸿化工有限公司'
                },
                {
                    value: '江西有色冶金化工有限公司',
                    label: '江西有色冶金化工有限公司'
                },
                {
                    value: '江西坤隆新材料有限公司',
                    label: '江西坤隆新材料有限公司'
                },
                {
                    value: '金启生物能源有限公司',
                    label: '金启生物能源有限公司'
                },
                {
                    value: '江西郑顺环保助剂有限公司',
                    label: '江西郑顺环保助剂有限公司'
                },
                {
                    value: '江西华裕家禽育种有限公司',
                    label: '江西华裕家禽育种有限公司'
                },
                {
                    value: '金泰硅业有限公司',
                    label: '金泰硅业有限公司'
                },
                {
                    value: '江西金泰化学新材料有限公司',
                    label: '江西金泰化学新材料有限公司'
                },
                {
                    value: '江西二源化工责任有限公司',
                    label: '江西二源化工责任有限公司'
                },
                {
                    value: '隆鑫新能源有限公司',
                    label: '隆鑫新能源有限公司'
                },
                {
                    value: '以新新能源科技有限公司',
                    label: '以新新能源科技有限公司'
                },
                {
                    value: '江西宜春铜鼓县铜鼓工业园江西奥马哈新材料有限公司',
                    label: '江西宜春铜鼓县铜鼓工业园江西奥马哈新材料有限公司'
                },
                {
                    value: '铜鼓县腾达有机硅有限公司',
                    label: '铜鼓县腾达有机硅有限公司'
                },
                {
                    value: '铜鼓县长红机制炭厂',
                    label: '铜鼓县长红机制炭厂'
                },
                {
                    value: '铜鼓电化厂',
                    label: '铜鼓电化厂'
                },
                {
                    value: '铜鼓垃圾填埋场',
                    label: '铜鼓垃圾填埋场'
                },
                {
                    value: '铜鼓县垃圾处理厂',
                    label: '铜鼓县垃圾处理厂'
                },
                {
                    value: '江西铜鼓仁和制药有限公司',
                    label: '江西铜鼓仁和制药有限公司'
                },
                {
                    value: '江西民济药业有限公司',
                    label: '江西民济药业有限公司'
                },
                {
                    value: '江西康天新材料有限公司',
                    label: '江西康天新材料有限公司'
                }
            ],
        },
        {
            value: '定州市大气环境精准监测项目',
            label: '定州市大气环境精准监测项目',
            children: [
                {
                    value: '定州短信预警',
                    label: '定州短信预警'
                },
            ],
        },
        {
            value: '汉中城市水项目',
            label: '汉中城市水项目',
            children: [
                {
                    value: '汉中水质报警',
                    label: '汉中水质报警'
                },
            ],
        },
        {
            value: '其他项目',
            label: '其他项目',
        },
        // {
        //     value: 'jiangsu',
        //     label: 'Jiangsu',
        //     children: [
        //         {
        //             value: 'nanjing',
        //             label: 'Nanjing',
        //             children: [
        //                 {
        //                     value: 'zhonghuamen',
        //                     label: 'Zhong Hua Men',
        //                 },
        //             ],
        //         },
        //     ],
        // },
    ];
    // const onChange = (value) => {
    //     if (value[0] === '其他项目') {
    //         setCompany('')
    //     }else{
    //         setCompany(value[-1])
    //     }
    //     console.log(value);
    // };
    // 退出登录
    const exit = () => {
        // 把之前的Modal改为modal
        modal.confirm({
            title: '是否退出登录？',
            onOk() {
                logout()
            },
        })
    }
    const onFinish = (values) => {
        console.log('Success:', values);
        apiRequest({
            url: "http://127.0.0.1:8080/send_api/InsertTelephone",
            data: {
                "username": values.telephone,
                "name": values.username,
                "is_deleted": 0,
                "telephone": values.telephone,
                "company": values.company[0] === '其他项目' ? '' : values.company[-1],
                "flag": 0
            },
            success: (res) => {
                console.log(res)
                Modal.success("插入成功")
            },
        })

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const filter = (inputValue, path) =>
        path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    return (
        <div className="P-home" >
            {/* <div className="ipt-con">
                <Button onClick={() => { goto('/account') }}>组件外跳转</Button>
            </div>
            <div className="ipt-con">
               
                    <Button type="primary" onClick={() => { navigate('/login') }}>返回登录</Button>
                    <Button type="primary" style={{ marginLeft: "20px" }} onClick={() => { navigate('/account') }}>账号信息</Button>
                
                <Button type="primary" onClick={exit}>返回登录</Button>
            </div>*/}
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="姓名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '用户名/手机号',
                        },
                    ]}
                >
                    <Input placeholder="请填写用户名/手机号" />
                </Form.Item>

                <Form.Item
                    label="手机号"
                    name="telephone"
                    rules={[
                        {
                            required: true,
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (/^1[3|4|5|6|7|8|9]\d{9}$/.test(getFieldValue('telephone'))) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('手机号格式不正确'));
                            },
                        }),
                    ]}
                >
                    <Input placeholder="请填写手机号" />
                </Form.Item>
                <Form.Item
                    label="项目信息"
                    name="company"
                    rules={[
                        {
                            required: true,
                            message: 'company',
                        },
                    ]}
                >
                    <Cascader options={options} placeholder="请选择项目信息" showSearch={{ filter, }} onSearch={(value) => console.log(value)}
                    />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
            {/*
            <Header title="home" info={() => { console.log('info:home') }} />
           
            <h1 style={{ color: token.colorText }}>Home Page</h1>
             */}
            {
                // 这是最终解决Modal.method跟随换肤的关键，contextHolder在组件DOM中随便找个地方放就行
                contextHolder
            }
        </div >
    )
}

export default Home